<script setup>
const router = useRouter();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  loading: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [String, Number],
    default: "50%",
  },
  closeOnClickModal: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["close", "confirm", "update:modelValue", "open"]);

const onCancel = () => {
  emits("update:modelValue", false);
  emits("close");
};
const onSubmit = async () => {
  emits("confirm");
};
const onOpen = ()=>{
  emits("open");
}
</script>
<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    @close="onCancel"
    @open="onOpen"
    :width="width"
    append-to-body
    :close-on-click-modal="closeOnClickModal"
    v-bind="$attrs"
  >
    <slot></slot>
    <template #footer>
      <slot name="footer">
        <span class="dialog-footer">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" :loading="loading" @click="onSubmit"
            >提交</el-button
          >
        </span>
      </slot>
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: "Dialog",
};
</script>
